<template>
  <view class="order-create">
    <!-- 顶部导航栏 -->
    <view class="nav-bar">
      <view class="back-btn" @click="goBack">
        <uni-icons type="arrow-left" size="24" color="#333"></uni-icons>
      </view>
      <view class="page-title">预约服务</view>
    </view>
    
    <!-- 服务信息 -->
    <view class="service-info">
      <view class="service-title">{{ serviceInfo.title }}</view>
      <view class="service-meta">
        <view class="rating">
          <uni-icons type="star-filled" size="14" color="#ff7a45"></uni-icons>
          <text>{{ serviceInfo.rating }}</text>
          <text class="rating-count">({{ serviceInfo.ratingCount }})</text>
        </view>
        <view class="service-time">{{ serviceInfo.time }}</view>
      </view>
      <view class="service-price">¥{{ serviceInfo.price }}</view>
    </view>
    
    <!-- 预约表单 -->
    <view class="order-form">
      <!-- 服务地址 -->
      <view class="form-item">
        <view class="form-label">服务地址</view>
        <view class="form-input-wrapper" @click="editAddress">
          <input 
            class="form-input" 
            type="text" 
            v-model="formData.address" 
            placeholder="请输入服务地址" 
            disabled
          />
          <uni-icons type="compose" size="20" color="#999"></uni-icons>
        </view>
      </view>
      
      <!-- 联系人 -->
      <view class="form-item">
        <view class="form-label">联系人</view>
        <input 
          class="form-input" 
          type="text" 
          v-model="formData.contactName" 
          placeholder="请输入联系人姓名"
        />
      </view>
      
      <!-- 联系电话 -->
      <view class="form-item">
        <view class="form-label">联系电话</view>
        <input 
          class="form-input" 
          type="number" 
          v-model="formData.contactPhone" 
          placeholder="请输入联系电话"
          maxlength="11"
        />
      </view>
      
      <!-- 服务日期 -->
      <view class="form-item">
        <view class="form-label">服务日期</view>
        <view class="form-input-wrapper" @click="openDatePicker">
          <input 
            class="form-input" 
            type="text" 
            v-model="formData.serviceDate" 
            placeholder="请选择服务日期" 
            disabled
          />
          <uni-icons type="calendar" size="20" color="#999"></uni-icons>
        </view>
      </view>
      
      <!-- 服务时间 -->
      <view class="form-item">
        <view class="form-label">服务时间</view>
        <view class="form-input-wrapper" @click="openTimePicker">
          <input 
            class="form-input" 
            type="text" 
            v-model="formData.serviceTime" 
            placeholder="请选择服务时间" 
            disabled
          />
          <uni-icons type="arrowdown" size="20" color="#999"></uni-icons>
        </view>
      </view>
      
      <!-- 房屋面积 -->
      <view class="form-item">
        <view class="form-label">房屋面积</view>
        <view class="form-input-wrapper" @click="openAreaPicker">
          <input 
            class="form-input" 
            type="text" 
            v-model="formData.houseArea" 
            placeholder="请选择房屋面积" 
            disabled
          />
          <uni-icons type="arrowdown" size="20" color="#999"></uni-icons>
        </view>
      </view>
      
      <!-- 特殊需求 -->
      <view class="form-item">
        <view class="form-label">特殊需求（选填）</view>
        <textarea 
          class="form-textarea" 
          v-model="formData.specialRequirements" 
          placeholder="请描述您的特殊需求，如过敏情况、宠物情况等..."
        ></textarea>
      </view>
    </view>
    
    <!-- 费用明细 -->
    <view class="fee-details">
      <view class="section-title">费用明细</view>
      <view class="fee-item">
        <text>基础服务费</text>
        <text>¥{{ serviceInfo.price }}</text>
      </view>
      <view class="fee-item" v-if="extraFees.largeHouse > 0">
        <text>大面积房屋附加费</text>
        <text>¥{{ extraFees.largeHouse }}</text>
      </view>
      <view class="fee-item discount" v-if="discounts.newUser > 0">
        <text>新用户优惠</text>
        <text>-¥{{ discounts.newUser }}</text>
      </view>
      <view class="fee-total">
        <text>总计</text>
        <text class="total-price">¥{{ totalPrice }}</text>
      </view>
    </view>
    
    <!-- 底部按钮 -->
    <view class="bottom-bar">
      <button class="submit-btn" @click="submitOrder">
        <uni-icons type="checkmarkempty" size="20" color="#fff"></uni-icons>
        <text>确认预约</text>
      </button>
    </view>
  </view>
</template>

<script setup>
import { ref, reactive, computed, onMounted } from 'vue';

// 服务信息
const serviceInfo = ref({
  id: 1,
  title: '新房入住全屋深度清洁',
  rating: 4.9,
  ratingCount: '328条评价',
  time: '4-6小时',
  price: '588'
});

// 表单数据
const formData = reactive({
  address: '北京市朝阳区建国路88号',
  contactName: '张先生',
  contactPhone: '138****6789',
  serviceDate: '2023/06/20',
  serviceTime: '下午 (13:00-17:00)',
  houseArea: '80-120平米',
  specialRequirements: ''
});

// 额外费用
const extraFees = reactive({
  largeHouse: 100
});

// 优惠折扣
const discounts = reactive({
  newUser: 50
});

// 计算总价
const totalPrice = computed(() => {
  const basePrice = Number(serviceInfo.value.price);
  const extras = extraFees.largeHouse;
  const discount = discounts.newUser;
  return (basePrice + extras - discount).toFixed(0);
});

// 返回上一页
const goBack = () => {
  uni.navigateBack();
};

// 编辑地址
const editAddress = () => {
  uni.navigateTo({
    url: '/pages/address/edit'
  });
};

// 打开日期选择器
const openDatePicker = () => {
  uni.showToast({
    title: '打开日期选择器',
    icon: 'none'
  });
  // 实际项目中应该使用日期选择器组件
};

// 打开时间选择器
const openTimePicker = () => {
  uni.showActionSheet({
    itemList: ['上午 (9:00-12:00)', '下午 (13:00-17:00)', '晚上 (18:00-21:00)'],
    success: function(res) {
      const timeOptions = ['上午 (9:00-12:00)', '下午 (13:00-17:00)', '晚上 (18:00-21:00)'];
      formData.serviceTime = timeOptions[res.tapIndex];
    }
  });
};

// 打开面积选择器
const openAreaPicker = () => {
  uni.showActionSheet({
    itemList: ['50-80平米', '80-120平米', '120-160平米', '160平米以上'],
    success: function(res) {
      const areaOptions = ['50-80平米', '80-120平米', '120-160平米', '160平米以上'];
      formData.houseArea = areaOptions[res.tapIndex];
      
      // 根据面积调整附加费
      if (res.tapIndex >= 2) {
        extraFees.largeHouse = 150;
      } else if (res.tapIndex === 1) {
        extraFees.largeHouse = 100;
      } else {
        extraFees.largeHouse = 0;
      }
    }
  });
};

// 提交订单
const submitOrder = () => {
  // 表单验证
  if (!formData.address) {
    uni.showToast({ title: '请输入服务地址', icon: 'none' });
    return;
  }
  if (!formData.contactName) {
    uni.showToast({ title: '请输入联系人', icon: 'none' });
    return;
  }
  if (!formData.contactPhone) {
    uni.showToast({ title: '请输入联系电话', icon: 'none' });
    return;
  }
  if (!/^1[3-9]\d{9}$/.test(formData.contactPhone)) {
    uni.showToast({ title: '请输入正确的手机号', icon: 'none' });
    return;
  }
  if (!formData.serviceDate) {
    uni.showToast({ title: '请选择服务日期', icon: 'none' });
    return;
  }
  if (!formData.serviceTime) {
    uni.showToast({ title: '请选择服务时间', icon: 'none' });
    return;
  }
  if (!formData.houseArea) {
    uni.showToast({ title: '请选择房屋面积', icon: 'none' });
    return;
  }
  
  // 提交订单
  uni.showLoading({
    title: '提交中...'
  });
  
  // 模拟提交请求
  setTimeout(() => {
    uni.hideLoading();
    uni.showToast({
      title: '预约成功',
      icon: 'success'
    });
    
    // 预约成功后跳转到订单详情页
    setTimeout(() => {
      uni.redirectTo({
        url: '/pages/order/detail?id=123456'
      });
    }, 1500);
  }, 1500);
};

onMounted(() => {
  // 获取路由参数
  const eventChannel = getOpenerEventChannel();
  const serviceId = eventChannel ? eventChannel.serviceId : 1;
  
  // 根据ID获取服务详情
  getServiceDetail(serviceId);
});

// 获取服务详情
const getServiceDetail = (id) => {
  // 实际项目中应该调用API获取数据
  console.log('获取服务ID:', id);
  
  // 这里使用的是预设的数据
};
</script>

<style lang="scss" scoped>
.order-create {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-bottom: 120rpx; // 为底部按钮留出空间
}

// 顶部导航栏
.nav-bar {
  display: flex;
  align-items: center;
  height: 90rpx;
  padding: 0 30rpx;
  background-color: #fff;
  border-bottom: 1px solid #f0f0f0;
  
  .back-btn {
    width: 60rpx;
    height: 60rpx;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .page-title {
    flex: 1;
    text-align: center;
    font-size: 36rpx;
    font-weight: bold;
    margin-right: 60rpx; // 为了标题居中
  }
}

// 服务信息
.service-info {
  background-color: #fff;
  padding: 30rpx;
  margin-bottom: 20rpx;
  
  .service-title {
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 15rpx;
  }
  
  .service-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15rpx;
    
    .rating {
      display: flex;
      align-items: center;
      font-size: 24rpx;
      color: #ff7a45;
      
      text {
        margin-left: 6rpx;
      }
      
      .rating-count {
        color: #999;
        margin-left: 6rpx;
      }
    }
    
    .service-time {
      font-size: 24rpx;
      color: #999;
    }
  }
  
  .service-price {
    font-size: 36rpx;
    font-weight: bold;
    color: #ff7a45;
  }
}

// 预约表单
.order-form {
  background-color: #fff;
  padding: 30rpx;
  margin-bottom: 20rpx;
  
  .form-item {
    margin-bottom: 30rpx;
    
    &:last-child {
      margin-bottom: 0;
    }
    
    .form-label {
      font-size: 28rpx;
      color: #333;
      margin-bottom: 15rpx;
    }
    
    .form-input-wrapper {
      position: relative;
      
      .uni-icons {
        position: absolute;
        right: 20rpx;
        top: 50%;
        transform: translateY(-50%);
      }
    }
    
    .form-input {
      width: 100%;
      height: 90rpx;
      background-color: #f5f5f5;
      border-radius: 8rpx;
      padding: 0 20rpx;
      font-size: 28rpx;
      box-sizing: border-box;
    }
    
    .form-textarea {
      width: 100%;
      height: 180rpx;
      background-color: #f5f5f5;
      border-radius: 8rpx;
      padding: 20rpx;
      font-size: 28rpx;
      box-sizing: border-box;
    }
  }
}

// 费用明细
.fee-details {
  background-color: #fff;
  padding: 30rpx;
  margin-bottom: 20rpx;
  
  .section-title {
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 20rpx;
  }
  
  .fee-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15rpx;
    font-size: 28rpx;
    color: #333;
    
    &.discount {
      color: #ff7a45;
    }
  }
  
  .fee-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20rpx;
    padding-top: 20rpx;
    border-top: 1px solid #f0f0f0;
    font-size: 28rpx;
    color: #333;
    
    .total-price {
      font-size: 36rpx;
      font-weight: bold;
      color: #ff7a45;
    }
  }
}

// 底部按钮
.bottom-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100rpx;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 30rpx;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
  
  .submit-btn {
    width: 100%;
    height: 80rpx;
    line-height: 80rpx;
    background-color: #ff7a45;
    color: #fff;
    font-size: 32rpx;
    border-radius: 40rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    
    text {
      margin-left: 10rpx;
    }
  }
}
</style>